<template>
  <div class="top">
    <!--表格上方内容-->
    <el-button type="primary" @click="todoInfo.isShow = true">新增</el-button>
    <el-popconfirm
        title="确定吗？"
        icon-color="red"
        confirmButtonText="确定"
        cancelButtonText="取消"
        confirmButtonType="text"
        @confirm="deleteAllCancel"
    >
      <template #reference>
        <el-button>删除所有已取消</el-button>
      </template>
    </el-popconfirm>
  </div>
  <el-table :data="todoList" stripe style="width: 100%">
    <el-table-column prop="id" label="序号" width="180" align="center">
      <template #default="scope">
        {{ scope.$index + 1 }}
      </template>
    </el-table-column>
    <el-table-column prop="title" label="标题" width="280" align="center">
      <template #default="scope">
        <el-button type="text" @click="initContentDialog(scope.row)">{{ scope.row.title }}</el-button>
      </template>
    </el-table-column>
    <el-table-column prop="createdate" label="创建时间" width="180" align="center"></el-table-column>
    <el-table-column prop="status" label="状态" width="380" align="center">
      <!--
        注意这里有个新语法，不在允许这样写了 slot-scope="scope"
        还可以使用语法糖 #default="scope"
       -->
      <template v-slot:default="scope">
        <el-tag :type="getTagType(scope.row.status).type">{{ getTagType(scope.row.status).content }}</el-tag>
        <!--n目运算符的写法-->
        <!-- <el-tag :type="scope.row.status===1?(''):scope.row.status===2?('success'):'danger'">{{ getTagType(scope.row.status).content }}</el-tag>-->
      </template>
    </el-table-column>
    <el-table-column label="操作" align="center">
      <template v-slot:default="scope">
        <el-popconfirm
            title="确定吗？"
            confirmButtonText="确定"
            cancelButtonText="取消"
            @confirm="updateTodoStatus(scope.row.id,1)"
        >
          <template #reference>
            <el-button type="text">待办</el-button>
          </template>
        </el-popconfirm>
        <el-popconfirm
            title="确定吗？"
            confirmButtonText="确定"
            cancelButtonText="取消"
            @confirm="updateTodoStatus(scope.row.id,2)"
        >
          <template #reference>
            <el-button type="text">完成</el-button>
          </template>
        </el-popconfirm>
        <el-popconfirm
            title="确定吗？"
            confirmButtonText="确定"
            cancelButtonText="取消"
            @confirm="updateTodoStatus(scope.row.id,3)"
        >
          <template #reference>
            <el-button type="text">取消</el-button>
          </template>
        </el-popconfirm>
      </template>
    </el-table-column>
  </el-table>
  <!--分页器-->
  <el-pagination
      class="pager"
      background
      layout="prev, pager, next"
      v-model:current-page="pageInfo.currenPage"
      :total="pageInfo.total"
      :page-size="pageInfo.pageSize"
  >
  </el-pagination>
  <!--内容显示框-->
  <el-dialog
      :title="contentDialog.title"
      v-model="contentDialog.isShowContent"
      width="30%"
      :before-close="destroyContentDialog"
  >
    <template #default>
      <el-input type="textarea" :rows="2" v-model="contentDialog.content"/>
    </template>
    <template #footer>
    <span class="dialog-footer">
      <el-button type="primary" @click="saveTodosContent">保 存</el-button>
    </span>
    </template>
  </el-dialog>
  <!--新增todo的弹窗-->
  <el-dialog
      v-model="todoInfo.isShow"
      title="新增"
      width="50%"
      :before-close="destroyAddDialog"
  >
    <template #default>
      <el-form
          label-width="80px"
          :model="todoInfo"
          :rules="addTodoRule"
          ref="addTodoFormTag"
      >
        <el-form-item label="标题" required prop="title">
          <el-input v-model="todoInfo.title"></el-input>
        </el-form-item>
        <el-form-item label="内容">
          <el-input type="textarea" v-model="todoInfo.content"></el-input>
        </el-form-item>

      </el-form>
    </template>
    <template #footer>
      <el-button type="primary" @click="addTodoInfo">新 增</el-button>
      <el-button type="primary" @click="addTodoFormTag.resetFields()">重 置</el-button>
    </template>
  </el-dialog>
</template>


<script>
import useTodoList from '../hooks/TodoListHook'

export default {
  name: "TodoList",
  setup() {
    return {
      ...useTodoList()
    }
  }
}
</script>

<style scoped>
.pager {
  float: right;
}

.top {
  margin-bottom: 20px;
}

</style>
